<template>
  <div>
    <a-form class="headerSerch" layout="inline">
      <a-row :gutter="24">
        <a-col :md="6" :sm="24">
          <a-button style="float: left; margin-top: 10px" @click="showModal()" type="primary">新增</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="userList"
      class="components-table-demo-nested"
      :pagination="false"
      :loading="loading"
    >
      <a slot="operation" slot-scope="text,record">
        <a-popconfirm
          title="Are you sure delete this record?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="removeUser(record)"
        >
          <a-button type="danger">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>
    <a-pagination
      v-model="queryParams.page"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="queryParams.limit"
      class="pagination"
      @showSizeChange="onShowSizeChange"
      @change="changePage"
      :show-total="(total, range) => `共${total}条`"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
    <AddModal
      :visible="visible"
      :roleListOptions="roleListOptions"
      :current="current"
      @ok="handleOk"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
import { getUserList, addUser, getRoleList, removeUser } from '@/api/manage'
import { isNotEmptyList } from '@/utils/util'
import AddModal from './addModal.vue'
import { mapState } from 'vuex'

export default {
  components: {
    AddModal
  },
  computed: {
    ...mapState({
      pageSizeOptions: state => state.user.pageSizeOptions
    })
  },
  data () {
    return {
      columns: [
        { title: 'id', dataIndex: 'id', key: 'id' },
        { title: '用户名', dataIndex: 'username', key: 'username' },
        { title: '权限', dataIndex: 'role', key: 'role', customRender: (text) => text.describe },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      userList: [],
      roleListOptions: [],
      loading: false,
      visible: false,
      queryParams: {
        page: 1,
        limit: 10
      },
      current: undefined,
      total: 0
    }
  },

  mounted () {
    this.getRoleOptionList()
    this.getUserList()
  },
  methods: {
    async getRoleOptionList () {
      const res = await getRoleList({ page: 1, limit: 999 })
      if (isNotEmptyList(res.data.data)) {
        this.roleListOptions = res.data.data.map(item => ({
          label: item.name,
          value: item.id
        }))
      }
    },

    async getUserList () {
      this.loading = true
      const res = await getUserList(this.queryParams)
      if (isNotEmptyList(res.data.data)) {
        this.userList = res.data.data
        this.total = res.data.total || 0
      }
      this.loading = false
    },
    async addUser (values) {
      const res = await addUser(values)
      if (res.code === 2000) {
        this.getUserList()
      }
      // this.loading = false
    },
    async removeUser (values) {
      // this.loading = true
      const res = await removeUser(values)
      if (res.code === 2000) {
        this.getUserList()
      }
      // this.loading = false
    },
    showModal (record) {
      console.log(record)
      // if (record) {
      //   this.current = record
      // }
      this.visible = true
    },
    handleOk (values) {
      this.addUser(values)
      this.visible = false
    },
    handleCancel () {
      this.visible = false
      this.current = undefined
    },
    onShowSizeChange (current, pageSize) {
      this.queryParams.pageSize = pageSize
      this.getUserList()
    },
    changePage (current, pageSize) {
      this.queryParams.page = current
      this.getUserList()
    }
  }
}
</script>
